<template>
	<view class="container">
		<!-- 课程封面和基本信息 -->
		<view class="course-header">
			<image :src="courseInfo.cover" mode="aspectFill" class="course-cover"></image>
			<view class="course-info">
				<text class="course-name">{{ courseInfo.name }}</text>
				<view class="course-meta">
					<view class="meta-item">
						<uni-icons type="person" size="14" color="#7f8c8d"></uni-icons>
						<text>{{ courseInfo.teacher }}</text>
					</view>
					<view class="meta-item">
						<uni-icons type="star" size="14" color="#7f8c8d"></uni-icons>
						<text>{{ courseInfo.rating }}分</text>
					</view>
					<view class="meta-item">
						<uni-icons type="calendar" size="14" color="#7f8c8d"></uni-icons>
						<text>{{ courseInfo.duration }}分钟</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 学习进度 -->
		<view class="progress-section">
			<view class="progress-info">
				<text class="progress-text">学习进度：{{ courseInfo.progress }}%</text>
				<text class="time-text">已学习 {{ courseInfo.learnedTime }} 分钟</text>
			</view>
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: courseInfo.progress + '%' }"></view>
			</view>
		</view>

		<!-- 标签页导航 -->
		<view class="tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{ active: currentTab === index }"
				@click="switchTab(index)"
			>
				<text>{{ tab }}</text>
			</view>
		</view>

		<!-- 标签页内容 -->
		<swiper class="tab-content" :current="currentTab" @change="onSwiperChange">
			<!-- 课程介绍 -->
			<swiper-item>
				<scroll-view scroll-y class="tab-scroll">
					<view class="intro-content">
						<rich-text :nodes="courseInfo.introduction"></rich-text>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 课程目录 -->
			<swiper-item>
				<scroll-view scroll-y class="tab-scroll">
					<view class="chapter-list">
						<view 
							v-for="(chapter, index) in courseInfo.chapters" 
							:key="index"
							class="chapter-item"
							@click="playChapter(chapter)"
						>
							<view class="chapter-info">
								<text class="chapter-name">{{ chapter.name }}</text>
								<text class="chapter-duration">{{ chapter.duration }}分钟</text>
							</view>
							<view class="chapter-status">
								<view v-if="chapter.completed" class="status-icon completed">
									<uni-icons type="checkbox-filled" size="20" color="#4b7bec"></uni-icons>
								</view>
								<view v-else class="status-icon">
									<uni-icons type="videocam" size="20" color="#a5b1c2"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 课程评价 -->
			<swiper-item>
				<scroll-view scroll-y class="tab-scroll">
					<view class="rating-section">
						<view class="rating-overview">
							<view class="rating-score">
								<text class="score">{{ courseInfo.rating }}</text>
								<view class="stars">
									<uni-icons 
										v-for="i in 5" 
										:key="i"
										type="star-filled"
										size="20"
										:color="i <= courseInfo.rating ? '#ffd700' : '#e0e0e0'"
									></uni-icons>
								</view>
							</view>
							<view class="rating-stats">
								<view class="stat-item" v-for="(stat, index) in courseInfo.ratingStats" :key="index">
									<text class="stat-label">{{ 5 - index }}星</text>
									<view class="stat-bar">
										<view class="stat-fill" :style="{ width: stat + '%' }"></view>
									</view>
									<text class="stat-value">{{ stat }}%</text>
								</view>
							</view>
						</view>

						<view class="comments-list">
							<view class="comment-item" v-for="(comment, index) in courseInfo.comments" :key="index">
								<view class="comment-header">
									<image :src="comment.avatar" mode="aspectFill" class="comment-avatar"></image>
									<view class="comment-info">
										<text class="comment-name">{{ comment.name }}</text>
										<view class="comment-rating">
											<uni-icons 
												v-for="i in 5" 
												:key="i"
												type="star-filled"
												size="14"
												:color="i <= comment.rating ? '#ffd700' : '#e0e0e0'"
											></uni-icons>
										</view>
									</view>
									<text class="comment-time">{{ comment.time }}</text>
								</view>
								<text class="comment-content">{{ comment.content }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="action-btn collect" @click="toggleCollect">
				<uni-icons :type="courseInfo.collected ? 'star-filled' : 'star'" size="24" color="#a5b1c2"></uni-icons>
				<text>收藏</text>
			</view>
			<view class="action-btn download" @click="downloadCourse">
				<uni-icons type="download" size="24" color="#a5b1c2"></uni-icons>
				<text>下载</text>
			</view>
			<button class="start-btn" @click="startLearning">开始学习</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseId: null,
				currentTab: 0,
				tabs: ['课程介绍', '课程目录', '课程评价'],
				courseInfo: {
					name: '人体解剖学基础',
					teacher: '张教授',
					rating: 4.8,
					duration: 45,
					progress: 60,
					learnedTime: 27,
					cover: '/static/courses/anatomy.jpg',
					collected: false,
					introduction: `
						<div style="font-size: 28rpx; color: #2c3e50; line-height: 1.6;">
							<p>本课程是医学专业的基础课程，主要介绍人体的基本构造和功能。</p>
							<p>课程内容包括：</p>
							<ul>
								<li>人体解剖学基本概念</li>
								<li>运动系统</li>
								<li>消化系统</li>
								<li>呼吸系统</li>
								<li>循环系统</li>
							</ul>
							<p>通过本课程的学习，你将：</p>
							<ul>
								<li>掌握人体各系统的基本构造</li>
								<li>理解各器官的位置关系</li>
								<li>了解人体各部分的基本功能</li>
							</ul>
						</div>
					`,
					chapters: [
						{
							id: 1,
							name: '第一章：绪论',
							duration: 15,
							completed: true
						},
						{
							id: 2,
							name: '第二章：运动系统',
							duration: 30,
							completed: true
						},
						{
							id: 3,
							name: '第三章：消化系统',
							duration: 45,
							completed: false
						},
						{
							id: 4,
							name: '第四章：呼吸系统',
							duration: 30,
							completed: false
						},
						{
							id: 5,
							name: '第五章：循环系统',
							duration: 45,
							completed: false
						}
					],
					ratingStats: [90, 80, 70, 50, 30],
					comments: [
						{
							name: '医学生小王',
							avatar: '/static/avatar/user1.jpg',
							rating: 5,
							time: '2024-03-15',
							content: '讲解非常详细，老师讲得很好，特别是运动系统这一章节，图文并茂，易于理解。'
						},
						{
							name: '实习医生小李',
							avatar: '/static/avatar/user2.jpg',
							rating: 4,
							time: '2024-03-14',
							content: '课程内容很充实，但是希望能增加一些临床案例的分析。'
						}
					]
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.courseId = options.id
				// TODO: 根据ID加载课程信息
			}
			
			if (options.autoplay) {
				this.startLearning()
			}
		},
		methods: {
			switchTab(index) {
				this.currentTab = index
			},
			onSwiperChange(e) {
				this.currentTab = e.detail.current
			},
			playChapter(chapter) {
				uni.navigateTo({
					url: `/pages/study/lesson?courseId=${this.courseId}&chapterId=${chapter.id}&autoplay=1`
				})
			},
			toggleCollect() {
				this.courseInfo.collected = !this.courseInfo.collected
				uni.showToast({
					title: this.courseInfo.collected ? '已收藏' : '已取消收藏',
					icon: 'success'
				})
			},
			downloadCourse() {
				uni.showLoading({
					title: '下载中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '下载完成',
						icon: 'success'
					})
				}, 2000)
			},
			startLearning() {
				// 默认播放第一个未完成的章节
				const firstUncompletedChapter = this.courseInfo.chapters.find(chapter => !chapter.completed)
				if (firstUncompletedChapter) {
					this.playChapter(firstUncompletedChapter)
				} else {
					this.playChapter(this.courseInfo.chapters[0])
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f8f9fc;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.course-header {
		position: relative;
		
		.course-cover {
			width: 100%;
			height: 400rpx;
		}
		
		.course-info {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx;
			background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
			
			.course-name {
				font-size: 36rpx;
				color: #fff;
				font-weight: 600;
				margin-bottom: 16rpx;
				display: block;
			}
			
			.course-meta {
				display: flex;
				align-items: center;
				
				.meta-item {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
					
					text {
						font-size: 24rpx;
						color: rgba(255,255,255,0.9);
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.progress-section {
		padding: 30rpx;
		background: #fff;
		
		.progress-info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;
			
			text {
				font-size: 28rpx;
				color: #2c3e50;
			}
		}
	}

	.progress-bar {
		width: 100%;
		height: 6rpx;
		background: #f0f2f7;
		border-radius: 3rpx;
		overflow: hidden;
		
		.progress-fill {
			height: 100%;
			background: #4b7bec;
			border-radius: 3rpx;
		}
	}

	.tabs {
		display: flex;
		background: #fff;
		padding: 0 30rpx;
		border-bottom: 1px solid #f0f2f7;
		
		.tab-item {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			
			text {
				font-size: 28rpx;
				color: #7f8c8d;
			}
			
			&.active {
				text {
					color: #4b7bec;
					font-weight: 500;
				}
				
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background: #4b7bec;
					border-radius: 2rpx;
				}
			}
		}
	}

	.tab-content {
		flex: 1;
		background: #fff;
	}

	.tab-scroll {
		height: 100%;
	}

	.intro-content {
		padding: 30rpx;
	}

	.chapter-list {
		.chapter-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1px solid #f0f2f7;
			
			.chapter-info {
				flex: 1;
				
				.chapter-name {
					font-size: 28rpx;
					color: #2c3e50;
					margin-bottom: 8rpx;
				}
				
				.chapter-duration {
					font-size: 24rpx;
					color: #7f8c8d;
				}
			}
			
			.chapter-status {
				.status-icon {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.rating-section {
		padding: 30rpx;
		
		.rating-overview {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #f0f2f7;
			margin-bottom: 30rpx;
			
			.rating-score {
				margin-right: 60rpx;
				text-align: center;
				
				.score {
					font-size: 64rpx;
					color: #2c3e50;
					font-weight: 600;
					line-height: 1;
					margin-bottom: 16rpx;
					display: block;
				}
				
				.stars {
					display: flex;
					justify-content: center;
				}
			}
			
			.rating-stats {
				flex: 1;
				
				.stat-item {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.stat-label {
						font-size: 24rpx;
						color: #7f8c8d;
						width: 60rpx;
					}
					
					.stat-bar {
						flex: 1;
						height: 20rpx;
						background: #f0f2f7;
						border-radius: 10rpx;
						margin: 0 16rpx;
						overflow: hidden;
						
						.stat-fill {
							height: 100%;
							background: #ffd700;
							border-radius: 10rpx;
						}
					}
					
					.stat-value {
						font-size: 24rpx;
						color: #7f8c8d;
						width: 60rpx;
						text-align: right;
					}
				}
			}
		}
	}

	.comments-list {
		.comment-item {
			padding: 30rpx 0;
			border-bottom: 1px solid #f0f2f7;
			
			.comment-header {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				.comment-avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					margin-right: 16rpx;
				}
				
				.comment-info {
					flex: 1;
					
					.comment-name {
						font-size: 28rpx;
						color: #2c3e50;
						margin-bottom: 8rpx;
					}
				}
				
				.comment-time {
					font-size: 24rpx;
					color: #7f8c8d;
				}
			}
			
			.comment-content {
				font-size: 28rpx;
				color: #2c3e50;
				line-height: 1.6;
			}
		}
	}

	.action-bar {
		height: 100rpx;
		background: #fff;
		border-top: 1px solid #f0f2f7;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		
		.action-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 40rpx;
			
			text {
				font-size: 24rpx;
				color: #7f8c8d;
				margin-top: 8rpx;
			}
		}
		
		.start-btn {
			flex: 1;
			height: 80rpx;
			background: #4b7bec;
			color: #fff;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style> 